﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Snake And Ladder</title>
    <script type="text/javascript" src="../Scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.tmpl.min.js"></script>
    <style type="text/css">
        #divRollDice
        {
            background-image: url('../Images/dice6.png');
            height: 49px;
            width: 49px;
        }
        .divRollDice_1
        {
            background-position: 0px 0px;
        }
        .divRollDice_2
        {
            background-position: -50px 0px;
        }
        .divRollDice_3
        {
            background-position: -101px 0px;
        }
        .divRollDice_4
        {
            background-position: -151px 0px;
        }
        .divRollDice_5
        {
            background-position: -201px 0px;
        }
        .divRollDice_6
        {
            background-position: -251px 0px;
        }
        .snake
        {
            background-color: Red;
        }
        .highlighted
        {
            background-color: #ffdc87;
            cursor: pointer;
        }
        .hidden
        {
            display: none;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
</head>
<body>
    <script type="text/javascript">
        // Global variable declaration
        var playerList = [];
        var currentDiceValue = 0;
        var currentPlayer;
    </script>
    <script type="text/javascript">
        // Arena Generation
        function SquareCell(row, col, id, value, next, prev) {
            this.row = row;
            this.col = col;
            this.id = id;
            this.value = value;
            this.next = next;
            this.prev = prev;
        }
        function createSquareCellArray(length) {
            var squareCellOuterArray = [];
            var colVal = length * length;
            var _diffVal = 0
            for (row = 0; row < length; row++) {
                var squareCellInnerArray = [];
                var newColVal = 0;
                var incColVal = 0;
                for (col = 0; col < length; col++) {
                    if ((row % 2) == 0) {
                        squareCellInnerArray.push(new SquareCell(length, length, colVal, colVal, colVal + 1, colVal - 1));
                    }
                    else {
                        if (newColVal == 0)
                            newColVal = Math.abs(colVal - length) + 1;
                        else
                            newColVal = newColVal + 1;
                        $('#temp').append("_" + newColVal + "-" + length + "-" + incColVal + "_"); //+ "=" + colVal + "-" + "(" + length + "-1)");
                        squareCellInnerArray.push(new SquareCell(length, length, newColVal, newColVal, newColVal + 1, newColVal - 1));
                        incColVal++;
                    }
                    colVal--;

                }
                squareCellOuterArray.push(squareCellInnerArray);
            }
            return squareCellOuterArray;
        }
    </script>
    <script type="text/javascript">
        //Dice Rolling        
        function generateDiceValue(elem) {
            var value = Math.round(Math.random() * 5) + 1;
            //only for dev purpose
            value = 1;
            showDice(10, value, $('#divRollDice'));
            return value;
        }

        function showDice(times, final, element) {
            element.removeClass();
            if (times > 1) {
                element.addClass('divRollDice_' + (Math.round(Math.random() * 5) + 1));
                $("#spnDiceNumber").html("Processing .... " + (Math.round(Math.random() * 5) + 1));
                setTimeout(function () { showDice(times - 1, final, element); }, 100);
            }
            else {
                element.addClass('divRollDice_' + final);
                $("#spnDiceNumber").html("Dice returned is " + final);
            }
        }
    </script>
    <script type="text/javascript">
        //Snake
        function Snake(headValue, tailValue, id) {
            this.headValue = row;
            this.tailValue = col;
            this.id = id;
        }
        function generateSnakes() {
        }
        function showSnakes(headValue, tailValue) {
            var snake = new Snake(headValue, tailValue);
            $("#" + headValue + ",#" + tailValue).addClass("snake");
            $("#" + headValue + ",#" + tailValue).attr({
                snakeStart: headValue,
                title: "Snake",
                snakeEnd: tailValue
            });
        }
        
    </script>
    <script type="text/javascript">
        //Player
        function Player(name, id, color, currentPos, startedMoving) {
            this.name = name;
            this.color = color;
            this.id = id;
            this.currentPos = currentPos;
            this.startedMoving = startedMoving;
        }
        
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            // calls this function in order
            generateArena();
            $("#btnGenerate").click(function () {
                $('#trTemplate').tmpl(createSquareCellArray($("#txtNumber").val())).appendTo('#tblArena');
                showSnakes(15, 60);
                showSnakes(8, 30);
                showSnakes(40, 70);
                showSnakes(95, 42);
            });

            $("#btnSpanRollDice").click(function () {
                $("#btnSpanRollDice").attr("disabled", "disabled");
                currentDiceValue = generateDiceValue();
                doMove();
            });

            $("#btnGetPos").click(function () {
                var _SquareCell = $("#45");
                var offset = _SquareCell.offset();
                alert("left: " + offset.left + ", top: " + offset.top);
                _SquareCell = $("#15");
                offset = _SquareCell.offset();
                alert("left: " + offset.left + ", top: " + offset.top);
            });

            $("#btnPlayerAdd").click(function () {
                getPlayers();
            });

            $("#btnStartGame").click(function () {
                playGame(0);
            });
        });
        function doMove() {
            if (currentPlayer.startedMoving == "0") {
                processDice();
            }
            else
                alert("Started Moving");
        }
        function processDice() {
            if (currentDiceValue > 0) {
                if (currentPlayer.startedMoving == "0") {
                    switch (currentDiceValue) {
                        case 1: writeToLog("Got 1");
                            $("#spnInfo").append("<br/> One :) ! Start Moving  !");
                            break;
                        case 6: writeToLog("Got 6");
                            $("#btnSpanRollDice").removeAttr("disabled");
                            $("#spnInfo").html("<br/> Six :) ! One more chance !");
                            break;
                        default:
                            writeToLog("Try Again :(");
                    }
                }
            }
            else
                alert("Invalid dice ");
        }
        function writeToLog(data) {
            $("#consoleArea").append("<br\> " + data);
        }
        function playGame(i) {
            if (i == playerList.length)
                i = 0;
            currentPlayer = playerList[i];
            highLightCurrentPlayer(playerList[i].id, true);
            rollDice(playerList[i]);
        }
        function highLightCurrentPlayer(playerID, isCurrent) {
            if (isCurrent)
                $("#" + playerID).addClass("highlighted");
            else
                $("#" + playerID).removeClass("highlighted");
        }
        function rollDice(currentplayer) {
            $("#divdice").removeClass("hidden");
            $("#btnSpanRollDice").removeAttr("disabled");
            $("#divdice").attr("title", "Roll the dice " + currentPlayer.name);
            $("#divdice").dialog({
                height: 'auto',
                modal: true,
                closeOnEscape: false,
                buttons: {
                    "OK": function () {
                        
                        movePlayerToken();
                        $(this).dialog("close");
                    }
                }
            });
        }
        function movePlayerToken() {
          
        }
        function getPlayers() {
            if (validPlayer()) {
                playerList.push(new Player($("#txtPlayerName").val(), $("#txtPlayerColor").val(), $("#txtPlayerColor").val(), -1, 0));
                makePlayerToken();
                $('#tblPlayersGrid').html("");
                $('#trPlayerGrid').tmpl(playerList).appendTo('#tblPlayersGrid');
                $("#txtPlayerName").val('');
                $("#txtPlayerColor").val('');
                $('<tr><th>Name</th><th>Color</th><th>Position</th></tr>').insertBefore('#tblPlayersGrid > tbody > tr:first');
                return playerList;
            }
        }
        function makePlayerToken() {
            var playerDiv;
            playerDiv = "<div id='" + $("#txtPlayerColor").val() + "' style='background-color:"
                + $("#txtPlayerColor").val() + "; width:15px;height:15px'>&nbsp;</div>";
            $("#playerDivs").append(playerDiv);
        }

        function validPlayer() {
            if (playerList.length > 0)
                return duplicateColor();
            else
                return true;
        }
        function duplicateColor() {
            var selectedColor = $("#txtPlayerColor").val();
            var filtered = $(playerList).filter(function () {
                return this.color == selectedColor;
            });
            if (filtered.length == 0) {
                return true;
            }
            else {
                alert("Sorry the color " + selectedColor + " already selected ! ");
                return false;
            }
        }
        function generateArena() {
            $('#trTemplate').tmpl(createSquareCellArray($("#txtNumber").val())).appendTo('#tblArena');
            showSnakes(15, 60);
            showSnakes(8, 30);
            showSnakes(40, 70);
            showSnakes(95, 42);
        }
    </script>
    <table>
        <tr>
            <td>
                Number
            </td>
            <td>
                <input type="text" id="txtNumber" value="10" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" id="btnGenerate" value="Generate" />
            </td>
        </tr>
    </table>
    <div id="divdice" class="hidden">
        <table>
            <tr>
                <td>
                    <div id="divRollDice" class="divRollDice_6">
                    </div>
                </td>
                <td>
                    <!--<span id="divRollDice" style="border-width: thick; border-color: Red; height: auto;">
                    <img src="../Images/Dice.ico" alt="dice Image" id="imgDice" height="48" width="48" /></span>-->
                    <input type="button" id="btnSpanRollDice" value="Roll Dice" />
                </td>
                <td>
                    <span id="spnDiceNumber"></span><span id="spnInfo"></span>
                </td>
            </tr>
        </table>
    </div>
    <table>
        <tr>
            <td>
                <input type="text" id="txtPlayerName" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="txtPlayerColor" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnPlayerAdd" value="Add" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnStartGame" value="Start" />
            </td>
        </tr>
    </table>
    <script id="trTemplate" type="text/x-jquery-tmpl">
           <tr>  {{each $data}}             
              <td id="${id}" row="${row}" col= "${col}" value="${value}" next="${next}" prev="${prev}">${value}</td>
            {{/each}}</tr>          
    </script>
    <table id="tblArena" border="2">
    </table>
    <input type="button" id="btnGetPos" value="Get Offset" />
    <script id="trPlayerGrid" type="text/html">
         <tr id="${id}">               
              <td>${name}</td>
              <td>${color}</td>
              {{if currentPos == "0"}}
                <td>OMG ! Rolling Dice :(</td>
              {{else currentPos == "-1"}}
                <td>Game is Not Statted !</td>
              {{else}}
                <td> ${currentPos} </td>
               {{/if}}
         </tr>    
    </script>
    <table id="tblPlayersGrid" border="2">
    </table>
    <br />
    <div id="playerDivs">
    </div>
    <div id="consoleArea">
    </div>
</body>
</html>
